<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>html源码转化为富文本</title>
  <script src="https://cdn.ckeditor.com/4.11.4/standard-all/ckeditor.js"></script>
  <script src="jquery-3.1.1.min.js"></script>
  
</head>

<body>
<div class="main">
	<h2>html源码转化为富文本</h2>
	<div>
		<label>抓取的文章地址: </label>&nbsp;&nbsp;&nbsp;<input id="input1"></input> <button id="getContentBtn">获取文章内容</button>&nbsp;&nbsp;&nbsp;<button id="showHtml">源码切换</button>
		
		<p/>
	</div>
	  <textarea cols="80" id="editor1" name="editor1" rows="10" data-sample-short>&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
	  
</div>
<script>
    var editor1 = CKEDITOR.replace('editor1', {
      extraAllowedContent: 'div',
      height: 460
    });
    editor1.on('instanceReady', function() {
      // Output self-closing tags the HTML4 way, like <br>.
      this.dataProcessor.writer.selfClosingEnd = '>';

      // Use line breaks for block elements, tables, and lists.
      var dtd = CKEDITOR.dtd;
      for (var e in CKEDITOR.tools.extend({}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
        this.dataProcessor.writer.setRules(e, {
          indent: true,
          breakBeforeOpen: true,
          breakAfterOpen: true,
          breakBeforeClose: true,
          breakAfterClose: true
        });
      }
	  $("a.cke_button_on").css("display:none");
      // Start in source mode.
      this.setMode('source');
    });
	$().ready(function(){
	  //$("#cke_33").css("display:none");
	 
	  //setTimeout(function () {
	   //debugger;
		//$("#cke_toolgroup").css("display:none");
	  //}, 1000);
	  $("#showHtml").click(function(){
		$("#cke_33").click();
	  });
	  $("#getContentBtn").click(function(){
	    var srcUrl = $("#input1").val();
		$.ajax({
			type:'post', 
			url: '/html/rich_text',
			data: srcUrl,
			//crossDomain: true,
			contentType: "application/json",
			dataType:"json",
            error : function() {
                alert('smx失败 ');
            },
            success: function(result){
                // alert("sucess");
				console.log(result);
				$("#cke_1_contents textarea").val(result.data);
				$("#cke_33").click();
			}
			}); 
	  });
	});
	
  </script>
</body>

</html>
<style>
	a.cke_button_on {
		background: #fff;
		border: 1px #bcbcbc solid;
		padding: 3px 5px;
		display: none;!important;
	}
	.main{
		text-align: center; /*让div内部文字居中*/
		background-color: #fff;
		border-radius: 20px;
		width: 800px;
		height: 850px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
  </style>